<template>
  <div class="fp">
    <avue-crud :option="option"
               ref="crud"
               :page="page"
               @search-change="searchChange"
               @size-change="sizeChange"
               @current-change="currentChange"
               @refresh-change="refreshChange"
               @selection-change="selectionChange"
               :row-style="rowStyle"
               :data="data">
      <template slot-scope="scope"
                slot="menu">
        <el-button type="text"
                   @click="setBuild(scope.row)"
                   size="small">生成授权书</el-button>
      </template>
      <template slot-scope="{}"
                slot="menuLeft">
        <el-button type="primary"
                   icon="el-icon-s-order"
                   @click="setFlag"
                   size="mini">开 票</el-button>
      </template>
    </avue-crud>
    <auth ref="auth"
          @submit="getList">
    </auth>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectlist: [],
      page: {
        currentPage: 1,
        total: 0,
        pageSizes: [10, 30, 50, 100, 200, 1000],
        pageSize: 10
      },
      option: {
        reserveSelection: false,
        size: 'mini',
        align: "center",
        headerAlign: 'center',
        excelBtn: true,
        selection: true,
        delBtn: false,
        viewBtn: true,
        editBtn: false,
        column: [{
          label: '编号',
          prop: 'compid',
          row: true,
          search: true
        },
        {
          label: '金额',
          prop: 'je'
        }, {
          label: '公司名',
          prop: 'mc',
          row: true,
          search: true,
          overHidden: true
        }, {
          label: '税号',
          prop: 'sh',
          width: 160,
          search: true,
          overHidden: true
        }, {
          label: 'QQ号',
          prop: 'qq',
          width: 160,
          search: true,
          overHidden: true
        },
        // {
        //   label: '收件地址',
        //   prop: 'sjdz',
        //   span: 24,
        //   type: 'textarea',
        //   overHidden: true
        // }, {
        //   label: '收件人',
        //   prop: 'sjr'
        // }, {
        //   label: '电话',
        //   prop: "lxfs"
        // },
        {
          label: '日期',
          prop: 'datetime'
        },
        {
          label: '备注',
          prop: 'bz'
        }]
      },
      data: [],
    }
  },
  methods: {
    searchChange (params, done) {
      this.getList(params)
      done();
    },
    selectionChange (list) {
      this.selectlist = list;
    },
    setFlag () {
      this.selectlist.forEach(ele => {
        const query = this.Bmob.Query('ticket');
        query.get(ele.objectId).then(res => {
          res.set('flag', true)
          this.$set(this.data[ele.$index], 'flag', true)
          res.save()
        })
      });
      this.$refs.crud.toggleSelection();
      this.$message.success('设置成功')
    },
    rowStyle ({ row }) {
      if (!row.flag) {
        return {
          backgroundColor: 'rgba(245,108,108,0.1)'
        }
      }
    },
    setBuild (row) {
      const { href } = this.$router.resolve({
        path: '/sqs',
        query: {
          qq: row.qq,
          id: row.compid,
          name: row.mc,
          date: row.datetime
        }
      })
      window.open(href, '_blank')
    },

    refreshChange () {
      this.data = [];
      this.$message.success('刷新成功')
      this.getList();
    },
    sizeChange (pageSize) {
      this.page.pageSize = pageSize;
      this.getList();
    },
    currentChange (val) {
      this.page.currentPage = val
      this.getList()
    },
    getList (params) {
      if (!this.$refs.auth.flag) return
      const query = this.Bmob.Query("ticket");
      query.count().then(res => {
        this.page.total = res;
        const next = (this.page.currentPage - 1) * this.page.pageSize;
        const breaks = this.page.pageSize * this.page.currentPage;
        query.limit(breaks)
        query.skip(next)
        for (let o in params) {
          query.equalTo(o, "==", params[o]);
        }
        query.order("-datetime", "-compid");
        query.find().then(res => {
          res.forEach(ele => {
            ele.je = 1499;
            ele.bz = "avue授权发票"
          });
          this.data = res;
        });
      })
    }
  },
}
</script>

<style lang="scss">
.fp {
  padding-top: 80px;
  min-height: 700px;
}
</style>
